<template>
    <div class="kapian">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <el-row :gutter="20">
                        <el-col :span="15">
                            <span class="class_span1">产品属性分类表</span>
                        </el-col>
                    </el-row>
                </div>
            </template>
            <div>
                <el-button type="primary" icon="Plus" @click="addDialog()" />
                <el-table :data="tableData" border stripe>
                    <el-table-column label="id" prop="id"></el-table-column>
                    <el-table-column label="name" prop="name"></el-table-column>
                    <el-table-column label="属性数量" prop="attributeCount"></el-table-column>
                    <el-table-column label="参数数量" prop="paramCount"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="200px">
                        <template #default="scope">
                            <el-button type="primary" icon="Edit" @click="showEditDialog(scope.row.id, scope.row)" />
                            <el-button type="primary" icon="Delete"
                                @click="deld(scope.row.id)" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 增加地址的对话框 -->
        <el-dialog v-model="addDialogVisible" title="增加产品属性" width="50%">
            <el-form ref="ruleFormRef" :model="this.page" :rules="rules" label-width="120px" :size="formSize" status-icon>
                <el-form-item label="name">
                    <el-input v-model="this.sun.name" />
                </el-form-item>
                <el-form-item label="属性数量" :label-width="formLabelWidth">
                    <el-input v-model="this.sun.attributeCount" />
                </el-form-item>
                <el-form-item label="参数数量" :label-width="formLabelWidth">
                    <el-input v-model="this.sun.paramCount" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="AddDialog(); addDialogVisible = false">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 修改地址的对话框 -->
        <el-dialog v-model=" editDialogVisible " title="修改产品属性信息" width="50%">
            <el-form ref="ruleFormRef" :model=" this.page " :rules=" rules " label-width="120px" :size=" formSize " status-icon>
                <el-form-item label="name">
                    <el-input v-model=" this.sun.name " />
                </el-form-item>
                <el-form-item label="属性数量" :label-width=" formLabelWidth ">
                    <el-input v-model=" this.sun.attributeCount " />
                </el-form-item>
                <el-form-item label="参数数量" :label-width=" formLabelWidth ">
                    <el-input v-model=" this.sun.paramCount " />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click=" editDialogVisible = false ">取消</el-button>
                    <el-button type="primary" @click=" Dialog(); editDialogVisible = false ">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { add } from '@/http/pms_product_attribute_category'
import { user } from '@/http/pms_product_attribute_category'
import { users } from '@/http/pms_product_attribute_category'
import { edit } from '@/http/pms_product_attribute_category'
import { del } from '@/http/pms_product_attribute_category'
import { defineComponent, ref } from 'vue';
export default defineComponent({
    data() {
        return {
            tableData: [],
            page: {
                total: 0,
                current: 1,
                size: 100,
            },
            addDialogVisible: false,
            editDialogVisible: false,
            sun: {
                attributeCount: 0,
                id: 0,
                name: '',
                paramCount: 0,
            },
        }
    },
    mounted() {
        this.fetchdata();
    },
    methods: {
        fetchdata() {
            const params = {
                current: this.page.current,
                size: this.page.size,
            }
            users(params).then(response => {
                const pages = response.data;
                this.tableData = pages.data.page.records;
                this.page = page
            }).catch(err => {
                console.log("error");
            });
        },
        addData() {
            this.sun.push(this.tableData);
            this.$forceUpdate();
            // this.fetchdata()
        },
        deld(id) {

        },
        onSubmit() {
            add(this.page).then(res => {
                console.log(res)
            }).catch(err => {
                console.log("error");
            });
        },
        showEditDialog(id, row) {
            console.log(id)
            console.log(row)
            this.sun.id = id
            this.sun.attributeCount = row.attributeCount
            this.sun.name = row.name
            this.sun.paramCount = row.paramCount
            this.editDialogVisible = true
        },
        addDialog() {
            this.sun = {
                attributeCount: 0,
                id: 0,
                name: '',
                paramCount: 0,
            };
            this.addDialogVisible = true
        },
        Dialog() {
            edit(this.sun).then(res => {
                this.fetchdata()
            }).catch(err => {
                console.log("error");
            });
        },
        AddDialog() {
            add(this.sun).then(res => {
                this.fetchdata()
            }).catch(err => {
                console.log("error");
            });
        },
        deepClone(obj) {
            var target = {};
            for (var key in obj) {
                if (Object.prototype.hasOwnProperty.call(obj, key)) {
                    if (typeof obj[key] === 'object') {
                        target[key] = deepClone(obj[key]);
                    } else {
                        target[key] = obj[key];
                    }
                }
            }
            return target;
        },
    }
});
</script>

<style lang="scss" scoped>
.kapian {

    .el-card {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
    }

    .el-table {
        margin-top: 15px;
    }

    .el-pagination {
        margin-top: 15px;
    }

    .el-pagination {
        margin-top: 15px;
    }
}

.el-row {
    margin-top: 10px;
}

.class_span1 {
    font-size: 20px;
    font-style: normal;
    font-family: 宋体；
}
</style>